﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>女书之形</title>
    <style>
        * { /*初始化*/
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        .main {
            width: 1300px;
            margin: auto;
        }

        .begin, .menu, .countainer, .ending {
            float: left;
            width: 100%;
            box-sizing: border-box;
        }

        .begin {
            height: 260px;
            padding: 50px;
            font-size: 40pt;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            /*line-height: 260px;*/
            text-align: center;
            background: #f0ebe5;
        }

        .menu {
            height: 40px;
            background: linear-gradient(#ececea,#e0e5df);
        }

        .map {
            width: 1500px;
            /*margin: auto;*/
        }

            .map li {
                height: 40px;
                width: 200px;
                float: left; /*通过左浮动，让列表变成横排*/
            }

            .map a {
                color: #000;
                font-size: 15px;
                padding: 10px 20px;
                display: inline-block;
            }

                .map a:hover {
                    background: #e0e5df;
                    color: #8696a7;
                }

        .countainer {
            text-align: center;
            background: #e0e5df;
        }

        .ending {
        }

        .lside {
            width: 200px;
            float: left;
        }

        .rside {
            width: 200px;
            float: right;
        }

        .inside {
            margin: 0px 250px;
        }

        .lside, .rside, .inside {
            padding: 10px;
        }

        .ending {
            padding: 10px;
            background: linear-gradient(#e0e5df,#ececea);
            text-align: center;
        }
        .pic{
            width:400px;
            height:600px;
            border-radius:12px;
            background:#efe8f0;
            overflow:hidden;
        }
        .pic img{
            width:400px;
            height:560px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="begin">
            <!--开头盒子-->
            <h1>走进非遗女书</h1>
            <p style="font-size:20px;">欢迎光临我们的网页，让我们一起传播女书，传承女书，发展女书吧~</p>
        </div>
        <div class="menu">
            <!--导航栏盒子-->
            <ul class="map">
                <li><a href="index.html">首页</a></li>
                <li><a href="xing.html">女书之形</a></li>
                <li><a href="voice.html">女书之声</a></li>
                <li><a href="tu.html">图案设计</a></li>
                <li><a href="chan.html">产品介绍</a></li>
                <li><a href="us.html">关于我们</a></li>
            </ul>
        </div>
        <div class="countainer">
            <!--主体盒子-->
            <div class="lside">
                <!--左边盒子-->
                <h2>女书之形</h2>
                <p>
                    我是左边栏的内容我是左边栏的内容
                    我是左边栏的内容我是左边栏的内容
                    我是左边栏的内容我是左边栏的内容
                    我是左边栏的内容我是左边栏的内容
                    我是左边栏的内容我是左边栏的内容
                </p>
            </div>
            <div class="rside">
                <!--右边盒子-->
                <h2>女书之形通知栏</h2>
                <p>
                    我是右边栏的内容我是左边栏的内容
                    我是右边栏的内容我是左边栏的内容
                    我是左边栏的内容我是左边栏的内容
                    我是左边栏的内容我是左边栏的内容
                    我是左边栏的内容我是左边栏的内容
                </p>
            </div>
            <div class="inside">
                <!--中间盒子-->
                <h2>女书之形中间栏</h2>
                <div class="pic">
                    <img src="jieqi.jpg" alt="" />
                    女书——24节气
                </div>
            </div>
        </div>
        <div class="ending">
            <p>已经到底啦~</p>
        </div>
    </div>
</body>
</html>